<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://lib.baomitu.com/vue/2.5.1/vue.js"></script>
	<style>
	</style>
</head>
<body>
	
	<div id="app">
		<div>
			<label>ID:
				<input type="text" v-model="id">
			</label>
			<label>Name:
				<input type="text" v-model="name">
			</label>
			<input type="button" value="添加" @click="add">
		</div>

<!--		注意：v-for循环时候，key属性只能使用number获取string-->
<!--		注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值-->
<!--		在组件中，使用v-for循环的时候，或者在一些特殊情况下，如果v-for有问题，必须在使用v-for的同时，指=指定唯一的字符串/数字 类型：key值-->
		<p v-for="item in list" :key="item.id">
			<input type="checkbox">
			{{item.id}}--------{{item.name}}
		</p>

	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data: {
				id:'',
				name:'',
				list:[
					{id:1,name:'张三'},
					{id:2,name:'李四'},
					{id:3,name:'王八'},
					{id:4,name:'赵大'}
				]
			},
			methods:{
				add:function () {
					//也可以用push()
					this.list.unshift({id:this.id,name:this.name});
				}
			}
		})
	</script>
</body>
</html>